<script setup>
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router';
import { useUserStore } from '@/store'

import BiNavBar from '@/components/biNavbar/index.vue'
import Wallet from '@/components/wallet/index.vue'

import Cash from './components/cash.vue'
import Coin from './components/coin.vue'
import Withdraw from './components/withdarw.vue'

const route = useRoute()
const userStore = useUserStore()
if (route.query.device) {
    userStore.$patch({
        uuid: route.query.device
    })
}

const currentTab = ref(0)
const tabMap = [
    Withdraw,
    Cash,
    Coin
]
const tab = computed(() => {
    return tabMap[currentTab.value]
})
function handleChangeTab(tabIndex) {
    currentTab.value = tabIndex
}

function androidBack() {
    try {
        android.back()
        console.log('调用安卓接口')
    } catch (error) {
        console.error(error)
    }
}
</script>

<template>
    <div class="flow-top">
        <BiNavBar title="Withdrawals Record" @click-left="androidBack" />
        <Wallet />
    </div>

    <div class="tab">
        <div class="tab-item" :class="{ active: currentTab === 0 }" key="withdraw" @click="handleChangeTab(0)">
            <span>withdraw</span>
        </div>
        <div class="tab-item" :class="{ active: currentTab === 1 }" key="cash" @click="handleChangeTab(1)">
            <span>Cash</span>
        </div>
        <div class="tab-item" :class="{ active: currentTab === 2 }" key="coin" @click="handleChangeTab(2)">
            <span>Coin</span>
        </div>
    </div>

    <div class="flow-bottom">
        <component :is="tab"></component>
    </div>
</template>

<style scoped lang="scss">
@import url(./flow.scss);
</style>